<template>
<div>
        <q-card>
          <q-tabs
            v-model="tab"
            dense
            inline-label
            class="text-grey-9"
            active-color="primary"
            indicator-color="primary"
            align="left"
            narrow-indicator
          >
            <q-tab name="mails" label="明细信息" ></q-tab>
          </q-tabs>
         <q-tab-panels v-model="tab" animated>
            <q-tab-panel name="mails">
                <div class="row  q-col-gutter-x-md">
                  <div class="col-4">
                    <div :class="$v.addOrEditForm.name.$error?'text-negative': ''">名称</div>
                      <q-input
                       v-model="addOrEditForm.name"
                       error-message="该字段为必填项"
                       :error="$v.addOrEditForm.name.$error"
                       @blur="$v.addOrEditForm.name.$touch"
                       dense hint/>
                    </div>
                  <div class="col-4">
                    <div :class="$v.addOrEditForm.nameEn.$error?'text-negative': ''">英文名称</div>
                      <q-input
                       v-model="addOrEditForm.nameEn"
                       error-message="该字段为必填项"
                       :error="$v.addOrEditForm.nameEn.$error"
                       @blur="$v.addOrEditForm.nameEn.$touch"
                       dense hint/>
                    </div>
                  <div class="col-4">
                    <div>层级</div>
                      <q-input
                       v-model="addOrEditForm.grade"
                       readonly
                       dense hint/>
                    </div>
                  <div class="col-4">
                    <div>是否为叶子结点</div>
                      <q-select
                       readonly
                        :options="typeOptions"
                        v-model="addOrEditForm.isLeaf"
                        emit-value
                        map-options
                        dense></q-select>
                  </div>
                  <div class="col-4">
                    <div :class="$v.addOrEditForm.sn.$error?'text-negative': ''">序号</div>
                      <q-input
                       v-model="addOrEditForm.sn"
                       error-message="该字段为必填项"
                       :error="$v.addOrEditForm.sn.$error"
                       @blur="$v.addOrEditForm.sn.$touch"
                       dense hint/>
                    </div>
                  <div class="col-4">
                    <div>创建时间</div>
                      <q-input
                       readonly
                       v-model="addOrEditForm.createTime"
                       dense hint/>
                  </div>
                  <div class="col-4">
                    <div>创建人</div>
                      <q-input
                       readonly
                       v-model="addOrEditForm.createUserName"
                       dense hint/>
                  </div>
                  <div class="col-4">
                    <div>修改时间</div>
                      <q-input
                       readonly
                       v-model="addOrEditForm.listUpdataTime"
                       dense hint/>
                  </div>
                  <div class="col-4">
                    <div>修改人</div>
                      <q-input
                       readonly
                       v-model="addOrEditForm.updateUserName"
                       dense hint/>
                  </div>
                  <!-- <div class="col-3">
                    <q-radio v-model="addOrEditForm.active" val= '1' label="启用" />
                    <q-radio v-model="addOrEditForm.active" val= '0' label="禁用" />
                  </div> -->
                  <div class="col-12">
                    <div>说明</div>
                      <q-input
                       type="textarea"
                       v-model="addOrEditForm.remark"
                       dense hint/>
                    </div>
                </div>
              <template>
                <q-btn color="light-blue" :label="$t('提交')" @click="updatelist"/>
              </template>
            </q-tab-panel>
          </q-tab-panels>
          <q-separator ></q-separator>
        </q-card>
</div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  props: {
    treeid: {
    },
    parentIds: {
      type: String
    }
  },
  data () {
    return {
      typeOptions: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      num: 0,
      tab: 'mails',
      addOrEditForm: {
        name: '',
        nameEn: '',
        grade: '',
        sn: '',
        isLeaf: '',
        increase: '',
        remark: '',
        active: '1',
        createTime: '',
        createUserName: '',
        updateUserName: '',
        listUpdataTime: ''
      }
    }
  },
  watch: {
    'treeid': {
      handler (treeid) {
        this.addOrEditForm = {
          name: '',
          nameEn: '',
          grade: '',
          sn: '',
          isLeaf: '',
          increase: '',
          remark: '',
          createTime: '',
          active: '1',
          createUserName: '',
          updateUserName: '',
          listUpdataTime: ''
        }
        this.getList()
      },
      deep: true
    },
    'parentIds': {
      handler (parentIds) {
        console.log('1111')
        this.addOrEditForm = {
          name: '',
          nameEn: '',
          grade: '',
          sn: '',
          isLeaf: '',
          increase: '',
          remark: '',
          createTime: '',
          active: '1',
          createUserName: '',
          updateUserName: '',
          listUpdataTime: ''
        }
        this.treeid = ''
      },
      deep: true
    }
  },
  validations: {
    addOrEditForm: {
      name: { required },
      nameEn: { required },
      sn: { required },
      increase: { required },
      remark: { required }
    }
  },
  methods: {
    async getList () {
      this.addOrEditForm = {
        name: '',
        nameEn: '',
        grade: '',
        sn: '',
        isLeaf: '',
        increase: '',
        remark: '',
        createTime: '',
        createUserName: '',
        updateUserName: '',
        active: '1',
        listUpdataTime: ''
      }
      await this.$api({
        method: 'get',
        url: `/mdm/category/findById/${this.treeid}`,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(this.treeid)
          let active = String(data.active)
          this.addOrEditForm = {
            name: data.name,
            nameEn: data.nameEn,
            grade: data.grade,
            sn: data.sn,
            isLeaf: data.isLeaf,
            increase: data.increase,
            remark: data.remark,
            createTime: data.createTime,
            active: active,
            createUserName: data.createUserName,
            updateUserName: data.updateUserName,
            listUpdataTime: data.listUpdataTime
          }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async updatelist () {
      await this.$api({
        method: 'put',
        url: `/mdm/category/update`,
        params: {
          categoryTypeId: this.parentIds,
          sn: this.addOrEditForm.sn,
          name: this.addOrEditForm.name,
          nameEn: this.addOrEditForm.nameEn,
          increase: this.addOrEditForm.increase,
          id: this.treeid,
          remark: this.addOrEditForm.remark,
          active: Number(this.addOrEditForm.active)
        },
        emulateJSON: true,
        useNotify: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.treeid = ''
          this.$emit('update', this.num)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style>

</style>
